<template>
  <el-drawer
    :wrapper-closable="false"
    title="详情"
    size="50%"
    :visible.sync="innerValue"
    @open="onDrawerOpen"
    @closed="onDrawerClosed"
  >
    <div class="relative flex h-full flex-col p-[16px] pb-[68px] pr-[2px] pt-[0px]">
      <div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
        <div class="common-secondary-bg">
          <div class="common-secondary-title"></div>
          操作详情
        </div>
        <el-form
          v-if="formData"
          ref="form"
          class="h-full overflow-y-auto"
          :model="formData"
          label-suffix="："
          size="small"
          status-icon
          label-position="right"
          label-width="70px"
        >
          <el-form-item prop="requestUrl" label="请求地址">
            <div>{{ formData.requestUrl }}</div>
          </el-form-item>

          <el-form-item prop="requestUrl" label="请求方式">
            <div>{{ formData.requestMode }}</div>
          </el-form-item>

          <el-form-item prop="requestUrl" label="请求方法">
            <div>{{ formData.requestMethod }}</div>
          </el-form-item>

          <el-form-item prop="requestParams" label="请求参数">
            <div class="whitespace-pre-line border-[1px] border-gray-500 bg-gray-100 p-[16px]">
              {{ formData.requestParams }}
            </div>
          </el-form-item>

          <el-form-item prop="requestUrl" label="返回参数">
            <div class="whitespace-pre-line border-[1px] border-gray-500 bg-gray-100 p-[16px]">
              {{ formData.responseBody }}
            </div>
          </el-form-item>

          <el-form-item prop="requestResult" label="状态">
            <t-button class="pointer-events-none" :type="formData.requestResult === '成功' ? 'success' : 'danger'">{{
              formData.requestResult
            }}</t-button>
          </el-form-item>
        </el-form>
      </div>
      <footer class="common-drawer-footer">
        <t-button class="common-search-btn" type="default" plain @click="innerValue = false">关 闭</t-button>
      </footer>
    </div>
  </el-drawer>
</template>

<script>
import config from "../config";
import vModelMixin from "@/mixin/v-model";
import { systemOperateLogDetail } from "@/api/operation-log";

export default {
  name: "DetailDrawer",
  components: {},
  mixins: [vModelMixin],
  props: {
    id: {
      type: [String, Number],
      required: true,
    },
  },
  data() {
    return {
      ...config,
      formData: null,
    };
  },
  computed: {},
  methods: {
    onDrawerOpen() {
      if (this.id) {
        systemOperateLogDetail({ id: this.id }).then((value) => {
          try {
            value.requestParams = JSON.stringify(JSON.parse(value.requestParams), null, 2);
            value.responseBody = JSON.stringify(JSON.parse(value.responseBody), null, 2);
          } catch (e) {
            console.error(e);
          }
          this.formData = value;
        });
      }
    },
    onDrawerClosed() {
      this.formData = null;
    },
  },
};
</script>

<style lang="scss" scoped></style>
